<template>
  <a-modal v-model="visible" centered title="支付详情" width="600px" :footer="false" :destroyOnClose="true">
    <div class="head">
      <p>
        <span v-if="detailObj.type == 1" class="refund">退款</span>
        <span class="trade-no">流水号:{{ detailObj.tradeNo }}</span>
      </p>
      <template v-if="detailObj.way == 0 || detailObj.way == 1">
        <!-- 支付 -->
        <template v-if="detailObj.type == 0">
          <p v-if="detailObj.way == 0">¥{{ detailObj.payPrice }}</p>
          <p v-if="detailObj.way == 1">{{ detailObj.payPoint }} 分</p>
        </template>
        <!-- 退款 -->
        <template v-if="detailObj.type == 1">
          <p v-if="detailObj.way == 0" class="red">-¥ {{ detailObj.refundAmout }}</p>
          <p v-if="detailObj.way == 1" class="red">- {{ detailObj.refundAmout }} 分</p>
        </template>
        <p>{{ detailObj.way | subWay }}</p>
      </template>
    </div>
    <a-divider />
    <template plate v-if="detailObj.way == 0 || detailObj.way == 1 || detailObj.way == 2">
      <a-descriptions :column="1">
        <template v-if="detailObj.type == 0">
          <a-descriptions-item label="微信交易单号" v-if="detailObj.way == 0">
            {{ detailObj.wechatOrderSn }}
          </a-descriptions-item>
          <a-descriptions-item label="支付时间">
            {{ detailObj.createTime }}
          </a-descriptions-item>
          <a-descriptions-item label="商户单号" v-if="detailObj.way == 0 || detailObj.way == 1">
            {{ detailObj.shopSn }}
          </a-descriptions-item>
        </template>
        <template v-if="detailObj.type == 1">
          <a-descriptions-item label="微信交易单号" v-if="detailObj.way == 0">
            {{ detailObj.wechatOrderSn }}
          </a-descriptions-item>
          <a-descriptions-item label="退款时间">
            {{ detailObj.createTime }}
          </a-descriptions-item>
          <a-descriptions-item label="商户单号" v-if="detailObj.way == 0 || detailObj.way == 1">
            {{ detailObj.shopSn }}
          </a-descriptions-item>
        </template>
      </a-descriptions>
      <a-divider />
    </template>
    <a-descriptions :column="1">
      <a-descriptions-item label="支付会员">
        {{ detailObj.phone }}
      </a-descriptions-item>
      <a-descriptions-item label="订阅编号">
        {{ detailObj.subSn }}
      </a-descriptions-item>
      <a-descriptions-item label="服务名称">
        BOX服务
      </a-descriptions-item>
      <a-descriptions-item label="价格"> {{ detailObj.payPrice }}元/年 </a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>
<script>
import '../filter.js'
export default {
  data() {
    return {
      detailObj: {},
      visible: false
    }
  },
  methods: {
    show(record) {
      console.log(record)
      this.detailObj = record
      this.visible = true
    },
    close() {
      this.visible = false
      this.detailObj = {}
    }
  }
}
</script>
<style lang="less" scoped>
.head {
  margin-bottom: 12px;
  width: 100%;
  p {
    font-size: 18px;
  }
}
.trade-no {
  color: #939393;
  font-size: 14px;
}
.refund {
  margin-right: 12px;
}
.refund,
.red {
  color: red;
  font-size: 16px;
}
</style>

